<!DOCTYPE html>
<html lang='zh-cn'>
<head>
  <meta charset='utf-8' />
  <meta http-equiv='X-UA-Compatible' content='IE=edge' />
  <meta
    name='viewport'
    content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
  />
  <meta name='renderer' content='webkit' />
  <title></title>
  <link rel='stylesheet' href='/public/admin/css/pintuer.css' />
  <link rel='stylesheet' href='/public/admin/css/admin.css' />
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  <link rel='stylesheet' href='/public/admin/js/pintuer.js' />
  <script
    type='text/javascript'
    charset='utf-8'
    src='/public/ueditor/ueditor.config.js'
  ></script>
  <script
    type='text/javascript'
    charset='utf-8'
    src='/public/ueditor/ueditor.all.min.js'
  ></script>
  <script
    type='text/javascript'
    charset='utf-8'
    src='/public/ueditor/lang/zh-cn/zh-cn.js'
  ></script>
</head>
<body>
<div class='panel admin-panel'>
  <div class='panel-head'>
    <strong><span class='icon-key'></span>添加博客</strong>
  </div>
  <div class='body-content'>
    <form
      method='post'
      class='form-x'
      action='/admin/blogs/add/upload_file'
      enctype='multipart/form-data'
    >
      <div class='form-group'>
        <div class='label'>
          <label for='type'>博客类型：</label>
        </div>
        <div class='field'>
          <input
            type='text'
            class='input'
            id='type'
            name='type'
            size='10'
            placeholder='请输入博客类型（原创、转载···）'
            data-validate='required:请输入博客类型！'
          />
        </div>
      </div>
      <div class='form-group'>
        <div class='label'>
          <label for='title'>博客标题：</label>
        </div>
        <div class='field'>
          <input
            type='text'
            class='input'
            id='title'
            name='title'
            size='15'
            placeholder='请输入博客标题'
            data-validate='required:请输入博客标题！'
          />
        </div>
      </div>
      <div class='form-group'>
        <div class='label'>
          <label for='author'>博客作者：</label>
        </div>
        <div class='field'>
          <input
            type='text'
            class='input'
            id='author'
            name='author'
            size='10'
            placeholder='请输入博客作者'
            data-validate='required:请输入博客作者！'
          />
        </div>
      </div>
      <div class='form-group'>
        <div class='label'>
          <label for='keywords'>博客关键字：</label>
        </div>
        <div class='field'>
          <input
            type='text'
            class='input'
            id='keywords'
            name='keywords'
            placeholder='请输入博客关键字'
            data-validate='required:请输入文章关键字！'
          />
        </div>
      </div>
      <div class='form-group'>
        <div class='label'>
          <label for='description'>博客描述：</label>
        </div>
        <div class='field'>
          <input
            type='text'
            class='input'
            id='description'
            name='description'
            placeholder='请输入博客描述'
            data-validate='required:请输入博客描述！'
          />
        </div>
      </div>
      <div class='form-group'>
        <div class='label'>
          <label for='cid'>博客分类：</label>
        </div>
        <div class='field'>
          <select name='cid' class='input' id='cid'>
            <% rows.forEach(item => { %>
            <option value='<%= item.id %>'><%= item.name %></option>
            <% }) %>
          </select>
        </div>
      </div>
      <div class='form-group'>
        <div class='label'>
          <label for='top'>是否置顶：</label>
        </div>
        <div class='field'>
          <select name='top' class='input' id='top'>
            <option value='0'>否</option>
            <option value='1'>是</option>
          </select>
        </div>
      </div>
      <div class='form-group'>
        <div class='label'>
          <label for='comment_status'>是否关闭评论：</label>
        </div>
        <div class='field'>
          <select name='comment_status' class='input' id='comment_status'>
            <option value='0'>否</option>
            <option value='1'>是</option>
          </select>
        </div>
      </div>
      <div class='form-group'>
        <div class='label'>
          <label for='cover'>博客封面：</label>
        </div>
        <div class='field'>
          <input
            type='file'
            class='input'
            id='cover'
            name='img'
            data-validate='required:请选择封面图片！'
          />
          <div id='img'></div>
        </div>
      </div>
      <div class='form-group'>
        <div class='label'>
          <label for='editor'>博客内容：</label>
        </div>
        <div class='field'>
          <script
            id='editor'
            name='content'
            type='text/plain'
            style='width: 100%; height: 500px;'
          ></script>
        </div>
      </div>
      <div class='form-group'>
        <div class='label'>
          <label></label>
        </div>
        <div class='field'>
          <button class='button bg-main icon-check-square-o' type='submit'>
            提交
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
</body>
<script>
  //实例化编辑器
  var ue = UE.getEditor('editor');

  // HTML5 File API 显示图片
  var reader = new FileReader();
  var img = new Image();
  var input = document.querySelector('input[type=file]');
  input.addEventListener('change', function(e) {
    var file = this.files[0];
    reader.readAsDataURL(file);
  });
  reader.onload = function(e) {
    img.src = this.result;
  };
  document.getElementById('img')
    .appendChild(img);
</script>
</html>
